import { Button, Form, Switch } from '@douyinfe/semi-ui';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';

const DepartmentEdit = ({
  entity,
  persistEntity,
  formApiRef,
}: {
  entity?: any;
  persistEntity?: (entity: any) => void;
  formApiRef?: (value: any) => void;
}) => {
  const { Section } = Form;

  const dispatch = useDispatch<any>();
  useEffect(() => {
    return () => {};
  }, []);

  return (
    <Form
      getFormApi={(api) => formApiRef && formApiRef(api)}
      labelPosition='left'
      labelAlign='right'
      labelWidth='100px'
      validateFields={() => ''}
      // layout='horizontal'
      // onChange={(e) => {}}
      onSubmit={(values) => {
        persistEntity && persistEntity(values);
      }}
      initValues={entity}
      // onReset={() => applyFilter(initialFilter)}
    >
      <Form.Input
        field='parentId'
        label='上级部门'
        placeholder='上级部门'></Form.Input>
      <Form.Input
        field='name'
        label='部门名称'
        placeholder='部门名称'></Form.Input>

      <Section text={<div className='mt-5 text-sm'>负责人</div>}>
        <Form.Input
          field='leaderUserId'
          label='负责人'
          placeholder='负责人'></Form.Input>
        <div className='flex gap-x-2'>
          <div className='flex-1'>
            <Form.Input
              field='phone'
              label='联系电话'
              labelWidth='100px'
              placeholder='联系电话'></Form.Input>
          </div>
          <div className='flex-1'>
            <Form.Input
              field='email'
              label='邮箱'
              labelWidth='100px'
              placeholder='邮箱'></Form.Input>
          </div>
        </div>
      </Section>

      <Section text={<div className='mt-5 text-sm'>状态</div>}>
        <Form.Switch
          field='open'
          label='部门状态'
          checkedText='开'
          uncheckedText='关'></Form.Switch>
      </Section>
      {/* <div style={{ display: 'flex', alignItems: 'flex-end' }}>
        <Button htmlType='reset'>重置</Button>
      </div> */}
    </Form>
  );
};

export default DepartmentEdit;
